<template>
  <div class="flex-grid">
    <div class="flex-main" v-if="!isNothing">
      <div class="todo isRepayed" v-if="isRepey">
        <p class="title">已结清本金(元)</p>
        <p class="money">￥{{detail.has_repay}}</p>
        <p class="tips">该账单的丰期已全部结清</p>
        <img class="repayed-img" :src="repayedImg">
      </div>
      <div class="todo hairlines-bottom" v-else>
        <p class="title">待还款金额(元)</p>
        <p class="money">￥{{detail.need_to_repay}}</p>
        <p class="tips">该笔额度将分{{detail.cycle}}期还完</p>
      </div>
      <router-link :to="payLink" class="repay iconfont icon-more" v-if="detail.status === '5'">
        查看还款计划
      </router-link>
      <div class="detail">
        <section class="hairlines-bottom">
          <h4>丰期明细</h4>
          <p><span>丰期金额</span><span class="right">￥{{detail.loan_money}}</span></p>
          <p><span>还款期限</span><span class="right">{{detail.due_time}}</span></p>
          <p><span>消费商家</span><span class="right">{{detail.name}}</span></p>
          <p><span>丰期合同</span><span class="right"><router-link :to="'/mine/Installment/contract/' + this.$route.params.id">查看</router-link></span></p>
        </section>
        <section class="hairlines-bottom">
          <h4>还款明细</h4>
          <p><span>已还金额</span><span class="right">￥{{detail.has_repay}}</span></p>
          <p><span>还款记录</span><span class="right"><router-link :to="'/mine/repay/record/' + this.$route.params.id">查看</router-link></span></p>
        </section>
      </div>
    </div>
    <div class="none" v-else>
      <img :src="nothingImage">
      <p>暂时还没有记录</p>
    </div>
    <footer>
      <input class="footer-fullW-bt" type="button" value="返回" @click="back">
    </footer>
  </div>
</template>
<script>
  import img from './img/repayed.png'

  export default {
    name: 'stageDetail',
    data () {
      return {
        title: '丰期详情',
        payLink: '/mine/Installment/plan/' + this.$route.params.id,
        repayedImg: img,
        isRepey: false,
        detail: {},
        isNothing: false
      }
    },
    methods: {
      back () {
        this.$router.go(-1)
      },
      getOrderDetail () {
        this.axios.post('/api/loan/get_one_loan', {
          user_id: this.$store.state.user_id,
          token: this.$store.state.token,
          user_loan_id: this.$route.params.id
        }).then((res) => {
          let data = res.data
          if (data.code !== 200) {
            this.isNothing = true
            return
          }
          let desc = data.desc
          this.detail = desc
          if (desc.status !== '5') {
            this.isRepey = true
          }
        })
      }
    },
    created () {
      this.setTitle(this.title)
      this.getOrderDetail()
    }
  }
</script>
<style lang="scss" scoped>
  @function rem($px) {
    @return $px / 75 * 1rem;
  }
  .header{
    position: relative;
    background: #fff;
    padding: 0 rem(24);
    height: rem(90);
    line-height: rem(90);
    font-size: rem(26);
    color: #333;
    .iconfont{
      position: absolute;
      top: 0;
      left: rem(24);
      bottom: 0;
    }
    h3{
      font-size: rem(33);
      text-align: center;
    }
    a{
      position: absolute;
      top: 0;
      right: rem(24);
      bottom: 0;
      color: #333;
    }
  }
  .flex-main{
    .todo{
      position: relative;
      background: #fff;
      text-align: center;
      padding: rem(35) 0 rem(40);
      .title{
        margin-bottom: rem(15);
        font-size: rem(30);
        color: #141414;
      }
      .money{
        margin-bottom: rem(15);
        font-size: rem(68);
        color: #ff8131;
      }
      .tips{
        font-size: rem(26);
        color: #999;
        span{
          color: #f81e1e;
        }
      }
      .repayed-img{
        position: absolute;
        top: rem(-30);
        right: rem(-30);
        width: rem(140);
        height: rem(140);
      }
    }
    .isRepayed{
      margin-bottom: rem(20);
    }
    .repay{
      display: block;
      margin-bottom: rem(15);
      background: #fff;
      position: relative;
      padding: 0 rem(24);
      height: rem(90);
      line-height: rem(90);
      font-size: rem(30);
      color: #333;
      &:before{
        position: absolute;
        top: 0;
        right: rem(24);
        bottom: 0;
        font-size: rem(22);
        color: #666;
      }
    }
    .detail{
      background: #fff;
      section{
        padding: rem(30) rem(24);
      }
      p,h4{
        margin-bottom: rem(15);
        font-size: rem(28);
        color: #999;
      }
      p{
        font-size: rem(26);
      }
      .right{
        float: right;
      }
      a{
        color: #0081e6;
      }
    }
  }
  footer{
    height: rem(100);
  }
  .none{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: rem(90);
    background: #fff;
    font-size: rem(28);
    color: #333;
    text-align: center;
    img{
      display: block;
      margin: rem(150) auto rem(40) auto;
      width: rem(340);
      height: rem(300);
    }
    a{
      color: #72a5ef;
    }
  }
</style>
